<template>
  <el-form v-loading="loading" label-position="right" label-width="100px" ref="form" :rules="rules" :model="form">
    <el-row>
      <el-col :span="12">
        <el-form-item label="药品名称" prop="title">
          <el-input v-model="form.title" placeholder="请输入药品名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="批准文号" prop="code">
          <el-input v-model="form.code" placeholder="Z20033231"></el-input>
          <div style="line-height: 13px;margin-top: 3px;">如:国药准字Z20033231 只需要填写 Z20033231</div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="`${(form.id ? '库存' :'入库数量')}`" prop="quantity">
          <el-input :disabled="form.id ? true : false" v-model="form.quantity" type="number" placeholder="请输入入库数量"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="过期时间" prop="over_time">
          <el-date-picker
            v-model="form.over_time"
            align="right"
            type="date"
            placeholder="请选择过期时间"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="规格" prop="spec">
          <el-input v-model="form.spec" placeholder="请输入药品规格"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入药品单位"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="药品类型" prop="m_type">
          <el-select v-model="form.m_type" placeholder="请选择药品类型">
            <el-option
                v-for="(item,index) in m_arr"
                :key="index"
                :label="item"
                :value="index">
              </el-option>
            </el-select>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用法类型" prop="u_type">
          <el-select v-model="form.u_type" placeholder="请选择用法类型">
            <el-option
                v-for="(item,index) in u_arr"
                :key="index"
                :label="item"
                :value="index">
              </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="使用方法" prop="u_func">
          <el-select v-model="form.u_func" placeholder="请选择使用方法">
           <el-option
               v-for="(item,index) in uf_arr"
               :key="index"
               :label="item"
               :value="index">
             </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="成本价" prop="cost_price">
          <el-input v-model="form.cost_price" type="number" placeholder="请输入成本价"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="盈利比" prop="ratio">
          <el-select v-model="form.ratio" placeholder="请选择盈利比" @change="ratioChange">
            <el-option label="请选择" value=""></el-option>
            <el-option label="5%" value="0.05"></el-option>
            <el-option label="10%" value="0.10"></el-option>
            <el-option label="15%" value="0.15"></el-option>
            <el-option label="20%" value="0.20"></el-option>
            <el-option label="25%" value="0.25"></el-option>
            <el-option label="30%" value="0.30"></el-option>
            <el-option label="35%" value="0.35"></el-option>
            <el-option label="40%" value="0.40"></el-option>
            <el-option label="45%" value="0.45"></el-option>
            <el-option label="50%" value="0.50"></el-option>
          </el-select>
          <div v-if="form.id" style="line-height: 16px;font-size: 13px;color: #2653ae;">若选择盈利比，则以最后一次该药品入库的成本价的盈利比来计算零售价</div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="出库价" prop="sell_price">
          <el-input v-model="form.sell_price" type="number" placeholder="请输入出库价"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row>
      <el-col :span="12">
        <el-form-item label="生产厂商" prop="supplier">
          <el-input v-model="form.supplier" placeholder="请输入药品生产厂商"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态" prop="status">
         <el-radio-group v-model="form.status">
             <el-radio label="1">可用</el-radio>
             <el-radio label="0">禁用</el-radio>
           </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item class="contacts-add">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="cancle">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import * as APIMedicalCare from '@/api/medicalCare';
import { mapState } from 'vuex'
 import { unixToDate } from "@/utils";
export default {
  name: 'medicine-add',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data () {
    return {
      form: {},
      // 站点列表
      m_arr: {},   // 药品类型
      u_arr: {},   // 用法类型
      uf_arr: {},  // 使用方法
      dialogVisible: false,
      loading: false,
      // 表单校验
      rules: {
        title: [
          { required: true,  message: '请输入药品名称', trigger: 'blur'  }
        ],
        code: [
          { required: true, message: '请输入批准文号',trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '请输入入库数量',  trigger: 'blur' }
        ],
        over_time: [
          { required: true, message: '请输入过期时间',  trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
     // this.medicineGetarr()
  },
  methods: {
    medicineGetarr(){
      const self = this;
      APIMedicalCare.medicineGetarr().then((resp) => {
         const res = resp.data;
         self['m_arr'] = res['m_arr'];
         self['u_arr'] = res['u_arr'];
         self['uf_arr'] = res['uf_arr'];
      }).finally(() => {
        this.loading = false
      });
    },
    getMedicineInfo(id){
       this.loading = true;
       APIMedicalCare.medicineInfo({ "id": id }).then(res => {
          const info = res.data.info;
          const form = Object.assign({}, this.form, info, { status: String(info['status']), over_time: unixToDate(info['over_time'], 'yyyy-MM-dd')});
          this.form = form;
       }).finally(() => {
        this.loading = false
      });
    },
    ratioChange(value){
      if(typeof(this.form.cost_price) == "undefined" || this.form.cost_price == ''){
        this.$message({ type: "warning", message: "请填写成本价格!"});
      } else {
        this.form.sell_price = (this.form.cost_price * ( 1 + Number(value))).toFixed(2);
      }
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            APIMedicalCare.medicineEdit(this.form).then(res => {
              this.$message({ type: "success", message: "编辑成功!"});
              this.cancle()
              this.load()
            })
          } else {
            APIMedicalCare.medicineAdd(this.form).then(res => {
              this.$message({ type: "success", message: "新增成功!"});
              this.cancle()
              this.load()
            })
          }
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        this.medicineGetarr();
        if(newval.hasOwnProperty('id')){
           this.getMedicineInfo(newval['id'])
        } else {
           this.form = { ...newval };
        }
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
.contacts-add {
  text-align: right;
}
.contract-text {
  font-size: 12px;
  color: #999;
  line-height: 12px;
  margin: 0;
}
.contract-img {
  width: 146px;
  height: 146px;
  cursor: pointer;
}
</style>
